<template>
    <div class="padding">
        <el-button type="primary" @click="dialog = true" style="margin: 12px 0;">增加用户</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180" />
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="phoneNumber" label="手机号" />
            <el-table-column prop="role" label="身份" />
            <el-table-column prop="permissions" label="访问范围">
                <template #default="scoped">
                    {{ scoped.row.permissions == 0 ? '所有操作' : "仅预览" }}
                </template>
            </el-table-column>
            <el-table-column prop="permissions" label="操作">
                <template #default="scoped">
                    <el-button type="danger" @click="delect(scoped.row.id)">删除</el-button>
                    <el-button type="primary" @click="update(scoped.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialog" width="500">
            <el-form label-position="right" label-width="auto" :model="userForm" style="max-width: 450px">
                <el-form-item label="用户名">
                    <el-input v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userForm.password" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="userForm.phoneNumber" />
                </el-form-item>
                <el-form-item label="身份">
                    <el-input v-model="userForm.role" />
                </el-form-item>
                <el-form-item label="访问范围">
                    <el-select v-model="userForm.permissions">
                        <el-option :value="0" label="管理员">管理员</el-option>
                        <el-option :value="1" label="仅浏览">仅浏览</el-option>
                        <el-option :value="2">？</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @clcik="cancle" type="danger" @click="dialog = false">取消</el-button>
                <el-button @clcik="sure" type="primary" @click="sure">确定</el-button>
            </template>
        </el-dialog>
        <el-dialog v-model="updateDialog" width="500">
            <el-form label-position="right" label-width="auto" :model="updateForm" style="max-width: 450px">
                <el-form-item label="用户名">
                    <el-input v-model="updateForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="updateForm.password" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="updateForm.phoneNumber" />
                </el-form-item>
                <el-form-item label="身份">
                    <el-input v-model="updateForm.role" />
                </el-form-item>
                <el-form-item label="访问范围">
                    <el-select v-model="updateForm.permissions">
                        <el-option :value="0" label="管理员">管理员</el-option>
                        <el-option :value="1" label="仅浏览">仅浏览</el-option>
                        <el-option :value="2">？</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="danger" @click="updateDialog = false">取消</el-button>
                <el-button type="primary" @click="updateSure">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const dialog = ref(false)
const updateDialog = ref(false)

interface FormData {
    id?: number;
    username: string,
    password: string,
    phoneNumber: string,
    role: string,
    permissions: number
}

const userForm = reactive<FormData>({
    username: "",
    password: "",
    phoneNumber: "",
    role: "",
    permissions: 0
})


const updateForm = reactive<FormData>({
    id: 0,
    username: "",
    password: "",
    phoneNumber: "",
    role: "",
    permissions: 0
})

const tableData = ref([])

const getUser = () => {
    axios.get("/api/getUsers").then(d => {
        tableData.value = d.data
    })
}
getUser()

const cancle = () => {

}


const delect = (id: number) => {
    axios.post("/api/deleteUser", { id }).then(d => {
        ElMessage.success({
            message: d.data.message
        })
        getUser()
    })
}

const update = (row: FormData) => {
    const keys = Object.keys(row)
    keys.forEach((key, i) => {
        if (key === "create_at") {
            return
        }
        updateForm[key] = row[key]
    })
    updateDialog.value = true
}

const updateSure = () => {
    axios.post("/api/updateUser", updateForm).then(d => {
        ElMessage.success({
            message: d.data.message
        })
        updateDialog.value = false
        getUser()

    })
}

const sure = () => {
    axios.post("/api/addUser", userForm).then((d) => {
        ElMessage.success({
            message: d.data.message
        })
        getUser()
        dialog.value = false
    })
}
</script>

<style scoped></style>